<script setup>
	import { reactive } from 'vue';
	// 表单数据，通过 reactive 定义固定字段的对象
	// reactive 对象的字段要根据后端接口文档要求定义
	const form = reactive({
		bookname: '', 
		author: '',
		publisher: '',
		creator: '东华理工',
	})
	
	// 新增图书，提交表单
	const onSubmit = async () =>{
		// 接口文档：https://apifox.com/apidoc/shared-e3812a75-2d81-4388-abf4-af83a2758a9a/api-153059641
		const res = await uni.request({
			method: 'POST', // 请求方式
			url: 'https://hmajax.itheima.net/api/books', // 请求地址
			data: form, // 把表单数据提交给后端
		})
		// 添加成功提示
		uni.showToast({ title: res.data.message })
		setTimeout(() => {
			// 返回上一页
			uni.navigateBack()
		},2000)
	}
</script>

<template>
	<view class="form column">
		<image class="form-cover" src="../../static/ic_public_cover.png" mode=""></image>
		<view class="form-item row">
			<text class="form-item-label">图书名称：</text>
			<input v-model="form.bookname" class="form-item-input" type="text" placeholder="请输入图书名称" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">图书作者：</text>
			<input v-model="form.author" class="form-item-input" type="text" placeholder="请输入图书作者" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">出版社：</text>
			<input v-model="form.publisher" class="form-item-input" type="text" placeholder="请输入图书出版社" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">创建者：</text>
			<input v-model="form.creator" class="form-item-input" type="text" placeholder="请输入图书创建者" />
		</view>
		<button @click="onSubmit" type="primary">新增图书</button>
	</view>
</template>

<style lang="scss">
	.form {
		align-items: center;

		.form-cover {
			width: 200rpx;
			height: 200rpx;
			margin: 20rpx;
		}

		.form-item {
			margin-bottom: 20rpx;
		}

		.form-item-label {
			font-size: 30rpx;
			width: 200rpx;
			text-align: right;
		}

		.form-item-input {
			font-size: 30rpx;
			border-bottom: 1rpx solid #ddd;
		}
	}
</style>